<template>
    <div v-on:click="subId">
        <img class="pic" v-bind:src="imgurl" alt="图片" @load="imgLoad">
        <div class="intro">
            <p class="desc">
                {{item.title}}
            </p>
            <div class="price">
                {{item.price}}
            </div>
            <div class="collect">
                {{item.cfav}}
            </div>
        </div>
    </div>
</template>
<script>
import {computed} from "vue";
import {useRouter} from 'vue-router'
import {getBus} from "@/utils/BqBus";

export default {
    name: "GoodsListItem",
    props:{
        item:{
            type:Object,
        }
    },
    setup(props){
      const router=useRouter()

      const publicBus=getBus()
      function subId(){
        router.push('/detail/'+props.item.iid)
      }
      function imgLoad(){
        publicBus.emit('itemImageLoad')
      }
      let imgurl= computed(
          {
            get(){
              return props.item.show.img||props.item.image
            }
          }
      )
      return{
        imgurl,

        subId,
        imgLoad
      }
    }

}
</script>
<style scoped>
.pic{
    width: 100%;
    height: 250px;
    border-radius: 7px;
}
p{
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
p,.price,.collect{
    font-size: 12px;
}
.price,.collect{
    display: inline-block;
}
.price{
    margin-left: 28%;
    color: pink;
}
.collect{
    position: relative;
    margin-left: 18px;
}
.collect::before{
    position: absolute;
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    left: -12px;
    top: 0;
    background-repeat: no-repeat;
    background-size: 12px 12px;
    background-image:url("~assets/img/common/collect.svg");
}
</style>
